<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Dialog Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Dialog</h1>
        </gs-jumbo>
        
        <gs-container min-width="sml;med;lrg">
            <h3>Functions:</h3>
            <pre><code>GS.openDialog(&lt;TEMPLATE-ID&gt;[, &lt;AFTER-OPEN-CALLBACK&gt;[, &lt;BEFORE-CLOSE-CALLBACK&gt;]]);
GS.openDialogToElement(&lt;elementTarget&gt;, &lt;TEMPLATE-ID&gt;, &lt;DIRECTION-REQUEST&gt;[, &lt;AFTER-OPEN-CALLBACK&gt;[, &lt;BEFORE-CLOSE-CALLBACK&gt;]]);
GS.msgbox(&lt;TITLE&gt;, &lt;MESSAGE&gt;, &lt;BUTTONS&gt;, &lt;CALLBACK&gt;);
GS.inputbox(&lt;TITLE&gt;, &lt;MESSAGE&gt;, &lt;CALLBACK&gt;);</code></pre>
            
            <h3>Description:</h3>
            <p>These Javascript functions put a modal dialog in front of the document. The dialog has a transparent shadow behind it to cover the document.</p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">Skeleton Example:</span>
                <p>A basic dialog with some text and a button in it. To make the dialog aware of the close button you must put the "dialogclose" attribute on it. The dialog will have the following behaviors:</p>
                <ol>
                    <li>A shadow will cover the document and the dialog will be in front of it.</li>
                    <li>You can't click the page behind the dialog because of the shadow.</li>
                    <li>You can dismiss the dialog by clicking the "Ok" button.</li>
                </ol>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation">
                        <center>This is a Dialog</center>
                        <gs-button dialogclose>Ok</gs-button>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">gs-page Example:</span>
                <p>A dialog with a gs-page as its content. This is the most common way of putting content into a dialog.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-header><center><h3>Dialog Header</h3></center></gs-header>
                            <gs-body padded>
                                Dialog Content
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Ok</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">After Open Example:</span>
                <p>In this example we have a dialog that can be opened by two different buttons. The first button will just open the dialog, the second button will open the dialog and change it after it opens</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-text id="test-control"></gs-text>
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Done</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog (No After Open)</gs-button>
                    <gs-button onclick="testDialogAfterOpen()">Dialog (After Open)</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation');
                    }
                    function testDialogAfterOpen() {
                        GS.openDialog('dialog-documentation', function () {
                            // after open
                            document.getElementById('test-control').value = 'After Open';
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[data-overlay-close]</code>:</span>
                <p>The <code>[data-overlay-close]</code> attribute allows the user to dismiss the dialog by clicking outside of the dialog.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template data-overlay-close id="dialog-Overlay-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-text id="test-control"></gs-text>
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Done</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-text id="test-control"></gs-text>
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Done</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog (With <code>[data-overlay-close]</code>)</gs-button>
                    <gs-button onclick="testDialogNoOverlay()">Dialog (Without <code>[data-overlay-close]</code>)</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-Overlay-documentation');
                    }
                    function testDialogNoOverlay() {
                        GS.openDialog('dialog-documentation');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Attribute <code>[no-background]</code>:</span>
                <p>The <code>[no-background]</code> attribute disables the modal background.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template no-background id="dialog-no-background-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-text id="test-control"></gs-text>
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Done</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-text id="test-control"></gs-text>
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Done</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog (With <code>[no-background]</code>)</gs-button>
                    <gs-button onclick="testDialogNoOverlay()">Dialog (Without <code>[no-background]</code>)</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-no-background-documentation');
                    }
                    function testDialogNoOverlay() {
                        GS.openDialog('dialog-documentation');
                    }
                </template>
            </gs-doc-example>
            
            
            <div class="doc-example-description">
                <span class="h3">Before Close Example:</span>
                <p>In this example we have a dialog that has two close buttons. Once one of the buttons is clicked a function will run and that function will be sent the click event and the text of the element that was clicked.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-body padded>
                                Are you sure?
                            </gs-body>
                            <gs-footer>
                                <gs-grid>
                                    <gs-block><gs-button dialogclose>No</gs-button></gs-block>
                                    <gs-block><gs-button dialogclose>Yes</gs-button></gs-block>
                                </gs-grid>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        // The second parameter is the after open function.
                        //      We are sending it empty string because we don't
                        //      need an after open function in this example.
                        GS.openDialog('dialog-documentation', '', function (event, strAnswer) {
                            // this function runs after a close element has been clicked
                            //      but before the dialog is taken out of the DOM
                            // strAnswer contains the text of the close element that was clicked
                            if (strAnswer === 'Yes') {
                                alert('You clicked "Yes".');
                            } else {
                                alert('You clicked "No".');
                            }
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Closing A Dialog From Javascript By Template ID Example:</span>
                <p>A dialog that is closed using a javascript function.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-button id="button-test">Close using javascript</gs-button>
                            </gs-body>
                            <gs-footer>
                                <gs-grid>
                                    <gs-block><gs-button dialogclose>Cancel</gs-button></gs-block>
                                    <gs-block><gs-button dialogclose>Ok</gs-button></gs-block>
                                </gs-grid>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation', function () {
                            document.getElementById('button-test')
                                .addEventListener('click', function (event) {
                                GS.closeDialog('dialog-documentation', 'Ok');
                            });
                        }, function (event, strAnswer) {
                            alert('Answer: ' + strAnswer);
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Closing A Dialog From Javascript Without An ID Example:</span>
                <p>A dialog that is closed using a javascript function.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation">
                        <gs-page>
                            <gs-body padded>
                                <gs-button id="button-test">Close using javascript</gs-button>
                            </gs-body>
                            <gs-footer>
                                <gs-grid>
                                    <gs-block><gs-button dialogclose>Cancel</gs-button></gs-block>
                                    <gs-block><gs-button dialogclose>Ok</gs-button></gs-block>
                                </gs-grid>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation', function () {
                            var dialog = this; // save the dialog element
                            
                            document.getElementById('button-test')
                                .addEventListener('click', function (event) {
                                // close the dialog using the "dialog"
                                //      variable we saved earlier
                                GS.closeDialog(dialog, 'Ok');
                            });
                        }, function (event, strAnswer) {
                            alert('Answer: ' + strAnswer);
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Error Theme Example:</span>
                <p>A dialog with the "error" theme. The header and footer of this dialog will be red. The theme is specified by the "data-theme" attribute on the template element. Currently "data-theme" can only be set to "error" and "regular".</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation" data-theme="error">
                        <gs-page>
                            <gs-header><center><h3>Dialog Header</h3></center></gs-header>
                            <gs-body padded>
                                Dialog Content
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Ok</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Max Width/Height Example:</span>
                <p>A dialog with a custom max width and height set. The maximum width is specified by the "data-max-width" attribute on the template element and maximum height is specified by the "data-max-height" attribute. The defaults for these parameters is "700px".</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto">
                    <template id="dialog-documentation" data-max-width="200px" data-max-height="200px">
                        <gs-page>
                            <gs-header><center><h3>Dialog Header</h3></center></gs-header>
                            <gs-body padded>
                                Dialog Content
                            </gs-body>
                            <gs-footer>
                                <gs-button dialogclose>Ok</gs-button>
                            </gs-footer>
                        </gs-page>
                    </template>
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="auto">
                    function testDialog() {
                        GS.openDialog('dialog-documentation');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Width and Height Mode Example:</span>
                <p>In this example we have six dialogs, each dialog has a different width/height setting. The default for this parameter is "detect".</p>
                <ul>
                    <li>Mode "detect": This mode attempts to give the best experience based on the content height.</li>
                    <li>Mode "phone": This mode goes to max_width and max_height until the page gets too small.</li>
                    <li>Mode "touch": This mode is full width and height on a touch device, defaults to "detect" everywhere else.</li>
                    <li>Mode "constrained": This mode is full width and height on a touch device, grow vertically with content everywhere else.</li>
                    <li>Mode "full": This mode is full width and height all of the time.</li>
                </ul>
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <template id="dialog-documentation-default">
                        <gs-page>
                            <gs-header><center>Defaulted to "detect"</center></gs-header>
                            <gs-body><div id="test-content"></div></gs-body>
                            <gs-footer><gs-button dialogclose>Ok</gs-button></gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation-detect" data-mode="detect">
                        <gs-page>
                            <gs-header><center>"detect"</center></gs-header>
                            <gs-body><div id="test-content"></div></gs-body>
                            <gs-footer><gs-button dialogclose>Ok</gs-button></gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation-phone" data-mode="phone">
                        <gs-page>
                            <gs-header><center>"phone"</center></gs-header>
                            <gs-body><div id="test-content"></div></gs-body>
                            <gs-footer><gs-button dialogclose>Ok</gs-button></gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation-touch" data-mode="touch">
                        <gs-page>
                            <gs-header><center>"touch"</center></gs-header>
                            <gs-body><div id="test-content"></div></gs-body>
                            <gs-footer><gs-button dialogclose>Ok</gs-button></gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation-constrained" data-mode="constrained">
                        <gs-page>
                            <gs-header><center>"constrained"</center></gs-header>
                            <gs-body><div id="test-content"></div></gs-body>
                            <gs-footer><gs-button dialogclose>Ok</gs-button></gs-footer>
                        </gs-page>
                    </template>
                    <template id="dialog-documentation-full" data-mode="full">
                        <gs-page>
                            <gs-header><center>"full"</center></gs-header>
                            <gs-body><div id="test-content"></div></gs-body>
                            <gs-footer><gs-button dialogclose>Ok</gs-button></gs-footer>
                        </gs-page>
                    </template>
                    
                    <gs-button onclick="dialog('default')">Default</gs-button>
                    <gs-button onclick="dialog('detect')">"detect"</gs-button>
                    <gs-button onclick="dialog('phone')">"phone"</gs-button>
                    <gs-button onclick="dialog('touch')">"touch"</gs-button>
                    <gs-button onclick="dialog('constrained')">"constrained"</gs-button>
                    <gs-button onclick="dialog('full')">"full"</gs-button>
                </template>
                <template for="js" height="auto">
                    function dialog(strMode) {
                        GS.openDialog('dialog-documentation-' + strMode, function () {
                            // GS.lorem() is a shortcut for lorem ipsum text
                            document.getElementById('test-content').innerHTML = GS.lorem() + ' ' + GS.lorem();
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">GS.openDialogToElement Example:</span>
                <p>Opening a dialog from a &lt;template&gt; that is positioned to a target element.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="17">
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                    <br /><br /><br />
                    <div id="target" bg-primary style="width: 100px; height: 100px;"></div>
                    
                    <template id="testTemplate">
                        <gs-header><h3>Dialog Header</h3></gs-header>
                        <gs-body>Dialog Content</gs-body>
                        <gs-footer>
                            <gs-button dialogclose>Ok</gs-button>
                        </gs-footer>
                    </template>
                </template>
                <template for="js" height="20">
                    function testDialog() {
                        GS.openDialogToElement(
                            document.getElementById('target'), // element to position too
                            'testTemplate', // template for the dialog
                            'right', // side that the dialog should try to go to
                                     //   if the dialog can't go on that side it
                                     //   will try other sides
                        function () {
                            // after open, same as GS.openDialog
                        }, function (event, strAnswer) {
                            // before close, same as GS.openDialog
                        });
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Message Box example:</span>
                <p>A dialog with a header and some text.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="5">
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="5">
                    function testDialog() {
                        GS.msgbox('Dialog Header', 'Dialog Content');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Input Box example:</span>
                <p>A dialog with a header, some text, and an input. The third parameter is a callback function that has one argument, the text the user typed or empty string if the user canceled it.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="5">
                    <gs-button onclick="testDialog()">Dialog</gs-button>
                </template>
                <template for="js" height="11">
                    function testDialog() {
                        GS.inputbox('Dialog Header', 'Dialog Content', function (text) {
                            alert('You typed:\n' + text);
                        });
                    }
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>